<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <router-link to="searchkey">
        <div class="saerchbox">
          <input name="" type="text" placeholder="请输入您要搜索的内容"><img src="/images/ss.png">
        </div>
      </router-link>

    </div>
    <div class="R">
      <a href="map.html">
        <img src="/images/map.png">
      </a>
    </div>
  </div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <Banner></Banner>
  </div>
  <div class="clear"></div>
  <div class="lqgwBox">
    <ul>
      <li><a href="list.html"><img src="/images/quanbu.png">
          <p>全部商品</p>
        </a></li>
      <li><a href="live.html"><img src="/images/zibo.png">
          <p>商品直播</p>
        </a></li>
      <li><a href="coupon.html"><img src="/images/youhui.png">
          <p>优惠活动</p>
        </a></li>
      <li><a href="ranking.html"><img src="/images/bandan.png">
          <p>榜单排行</p>
        </a></li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ul class="proul">
        <!-- 遍历列表 -->
        <li v-for="item in shopDataList" :key="item.id" @click="goDetail(item.id)">
          <img :src="item.shopUrl_text" />
          <p class="tit">{{ item.content }}</p>
          <div class="price" style="display: flex; justify-content: center; align-items: center;">
            <p>￥{{ item.price }}</p>
          </div>
        </li>
      </ul>
    </van-list>
  </van-pull-refresh>
  <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    
  </van-pull-refresh> -->

  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <van-back-top class="custom" style="background-color: rgba(255, 255, 255,0); color: #198dfb;" bottom="8vh"
    right="5vw"></van-back-top>
  <div class="footerBox">
    <Tab :modelValue="currentTab" @update:modelValue="handleTabUpdate"></Tab>
    <!-- <div class="footer">
      <ul>
        <li class="on">
          <a href="index.html">
            <img src="/images/f01.png">
            <p>首页</p>
          </a>
        </li>
        <li>
          <a href="typelist.html">
            <img src="/images/f2.png">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="find.html">
            <img src="/images/faxian.png">
            <p>发现</p>
          </a>
        </li>
        <li>
          <a href="gwc.html">
            <img src="/images/f3.png">
            <p>购物车</p>
          </a>
        </li>
        <li>
          <a href="my.html">
            <img src="/images/f4.png">
            <p>我的</p>
          </a>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script setup>
// import  from '@/components/comm/Tab.vue';
import Tab from './comm/Tab.vue';
import Banner from './comm/Banner.vue'
import { ref, onMounted } from 'vue';
import { POST } from '../services/request.js'
import { useRouter } from "vue-router";

// 存放shop数据
const shopDataList = ref([]);
// 初始化数据
const refreshing = ref(false); // 刷新状态

const page = ref(1);

//上拉加载初始化数据
const loading = ref(false);
const finished = ref(false)

const router = useRouter();
const detailId = ref(null);

onMounted(async () => {
  // 获取shop的方法
  await getShop(page.value);
})
// 模拟刷新逻辑
const onRefresh = async () => {
  refreshing.value = true; // 开启刷新状态
  // 先清空列表
  shopDataList.value = [];
  // 重置页码
  page.value = 1;
  // 更新列表数据（示例为追加数据，可根据需求修改）
  await getShop(page.value);
  refreshing.value = false; // 结束刷新状态
};

// 上拉刷新
const onLoad = async () => {
  page.value++;
  await getShop(page.value);
}

const currentTab = ref('home'); // 当前选中的标签页
const handleTabUpdate = (newValue) => {
  currentTab.value = newValue; // 更新父组件的状态
};

const getShop = async (page) => {
  loading.value = true
  const shopRes = await POST({
    url: '/Index/getNewShop',
    params: { page }
  })
  if (shopRes.code === 1) {
    shopDataList.value.push(...shopRes.data.shop);
    loading.value = false;
    if (shopRes.data.shop.length == 0) {
      finished.value = true;
    } else {
      finished.value = false;
    }
  }
}

// 点击后跳入商品详情页
const goDetail = async (id) => {
  detailId.value = id;
  await router.push({
    name: 'detail',
    params: {
      id
    }
  })
}


</script>